Animator, SuperTool
Animator Supertool

Welcome to the Animator Supertool. The animator is a tool that lets you create and insert moving graphics into your Web page with the minimum of fuss.

Using JAVA, the Animator lets you define different pictures (‘Frames’) and then display them in a sequence on the  visitors browser. However, unlike animated GIF’s, you animation can roam about the visitors screen.

Follow the steps below to create an Animation

 Starting the Animator

 Insert Images (or “Frames”) into the Animator.

 Set the behavior of the Animation.

 Set any text to go with the Animation.

 Insert your Animation into HotDog.


Starting the Animator

 On the Supertoolz menu, click ‘Java Animator’.

If the Supertool is not in the menu, you will need to install it.


How to, insert frames into the Animator
How to Insert Frames into the Animator

1	On the Supertoolz menu, click ‘Animator’.

•	If the Supertool is not in the menu, you will need to install it.

2	On the Animator Toolbar, add a frame to your animation.

3	A window will open asking you to enter a frame. Select the image and click ‘Open’.

4	The toolbar displays the sequence that the images will be displayed in your animation. You can change the order of the images by clicking on each image and dragging it to the correct position in the animation sequence.

5  Continue adding frames until you are done.

Tip

You can enter more than one frame at once by holding the shift button down as you select the pictures.

Next

 Set the Options for your Animation.


Animator: Options

Time Between Frames

This controls the time in milliseconds between the display of individual frames in the overall animation. This means it effectively controls the speed of display of the whole animation.

Delay before Restarting

If the Disappear Off Edge option is selected in the Behavior At Edge list, then this field controls how long the sprite will take to reappear after disappearing off the edge of the applet bounding box.

Background Image

Your animation can move over an image rather than a colored box.

Soundtrack

This entry specifies an overall sound file to be the soundtrack for the animation as a whole. It should be an .au! format sound file.

Applet Height

This is the height of the applet (in pixels) think of it as the defining the height of the box your animation moves in.

Applet Width

This is the width of the applet (in pixels) think of it as the defining the width of the box your animation moves in.

Applet Color

This color box allows selection of a background color for the whole applet bounding box.

# of times to repeat

This field controls only the frame selected in the Animation Sequence list and allows you to control how many times an individual frame will run in the final Animator project independently of any other frames.

Next:

 Now set the behavior of the Animation.


Animator: Behaviour
Animator: Behavior

The following animation behaviors can be set.

Behavior at Edge

Bounce Off Edge

The animation will approach the edge at an arbitrary angle and will bounce off such that the angle of reflection is equal to the angle of incidence - i.e. just like a bouncing ball.

Disappear Off Edge

The animation will cross the edge and disappear from view, but will 'warp' to the other side of the applet bounding box and re-appear after a delay controlled by the Delay Before Restarting field.

Horizontal Direction

This list controls the initial horizontal direction of any movement of the affected sprite inside the applet bounding box. Options are:

Don't Move Sideways

No horizontal movement at all.

Left to Right

Move from left boundary (or the position set by the Start Position Left field on the Properties tab) to the right, initially. If the Behavior At Edge property is set to Disappear At Edge, the animation's horizontal motion will always be left to right. For an animation whose Behavior At Edge is set to Bounce Off Edge, the concept of 'left to right' makes no difference after the first bounce has taken place.

Right to Left

Move from right boundary (or the position set by the Start Position Left field on the Properties tab) to the left, initially. If the Behavior At Edge property is set to Disappear At Edge, the animation will immediately disappear off the left edge, re-appear on the right, and subsequent horizontal motion will always be right to left. For an animation whose Behavior At Edge is set to Bounce Off Edge, the concept of 'right to left' makes no difference after the first bounce has taken place.

Vertical Direction

As per horizontal direction, but applies to up and down.

Horizontal Speed

If horizontal motion is enabled (see the Horizontal Direction list), this field controls the speed at which the animation moves horizontally.

Vertical Speed

As per horizontal speed, but applies to up and down.

Next

 Set Captions (Optional).

Compile the Animation to your HTML document.


Animator: Captions

If you are using the Animator to make a slide show rather than animations, then you will want to use the Captions option.

Enter the text for the caption into the ‘Caption for Selected Frame’ box and decide on the Font and Font effects you want to the font to appear in.

Next

 Compile your Animation to HotDog.


Animator: Compile Animation to HotDog

After completing your animation, click the ‘Compile’ button (F5)

Tell the Animator what directory your animation images will be stored in on your remote system. If you are not sure, just select ‘Same Directory as my HTML page’ and be sure that when you upload your project that the graphics and class files are in the same directory as the HTML file that uses the animation. This is IMPORTANT, because otherwise your animation will not work.

In ‘Directory To Copy All Files To:’ select the same directory relative directory as your remote directory. (If you selected ‘Same Directory as my HTML page’ then this directory is directory where HTML file that contains the animation is stored, e.g., C:\Program Files\HotDog4\HTMLFiles.

Click [image] to copy the images and class file to the directory you have selected.

Click [image] to insert the applet text into HotDog.

You can now preview you animation using either Netscape or Internet Explorer.


How to Create a JAVA Animation

1	Click on the ‘JAVA Animation Options’ tag.

2	Decide on time between successive frames appearing. Enter this value into the ‘Time Between Frames’ box.

3	After your animation has completed its sequence it can be delayed before re-starting. Enter a time for this value.

4	Click on the ‘Background Color’ button to choose a background color for your animation.

5	Click on the ‘Soundtrack’ button to choose a sound track that runs over your animation.

6	The ‘Width and Height’ boxes control how big the arena is for your animation to play around in.

7	To make your animation move from left to right (or vice-versa) on your Web page, select the direction you want your animation to move using the ‘Horizontal Direction’ menu box.

8	To control how your animation behaves when it reaches the edge of the visitors screen, choose an option from the ‘Behavior at Edge’ menu box.

9	Decide on a speed for the horizontal movement for your animation. Try different values to get the speed you need.

10	On the animator toolbar, click ‘Preview’ to see how your animation looks. Tweak any values you want to change.

11	When complete, click ‘Compile’ to insert your animation into HotDog.

12	Click ‘Done’ to exit the Animator.


How to create a GIF89a Animation

1	To begin, decide how many times you want the animation to repeat. If you want it to go on forever, enter 1000000.

2	Now decide how long you want each image to appear.

3	Click on each image in the animation sequence and enter the delay time in the box provided. A typical value for a delay is about 100 milliseconds.

4	The disposal method is how the image is removed. Leave on its default setting.

5	On the animator toolbar, click ‘preview’ to see how your animation looks. Tweak any values you want to change.

6	When complete, click ‘compile’ to insert your animation into HotDog.

7	Click Done to exit the Animator.


Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help Java Animator Context Help


Preview

If you have an animation ready to view, click the preview button and get a preview of how your animation will appear on the net.

  Overview


New

Clears any frames from the animation sequence, and begins a new animation

  Overview


Compile

Compile creates the animation and inserts it into HotDog. Click this button when you have finished creating your animation.

  Overview


Done

When you have finished using the Animator, click the Done button to exit and return to HotDog.

  Overview


Help

Click the help button to receive help using the animator.

  Overview


Add

To insert a picture (or frame) into the animator, click the Add button. A window will open allowing you to choose the files. You may select multiple files (using Shift-Click for contiguous lists and Ctrl-Click for individual file selection) before you click the OPEN button and all of them will be loaded into the picture list in the order they appear in the File Manager Files list.

  Overview


Delete

To delete a picture (or frame), just click the picture in the animation sequence and then click the delete button.

  Overview


Select All

To select all the pictures in the animation sequence, click the Select All button.

  Overview


Time Between Frames

This controls the time in milliseconds between the display of individual frames in the overall animation. This means it effectively controls the speed of display of the whole animation.

  Overview


Delay before Starting

If the Disappear Off Edge option is selected in the Behavior At Edge list, then this field controls how long the sprite will take to reappear after disappearing off the edge of the applet bounding box.

  Overview


Background Colour
Background Color

This color box allows selection of a background color for the whole applet bounding box.

  Overview


Soundtrack

This entry specifies an overall sound file to be the soundtrack for the animation as a whole. It should be an .au format sound file.

  Overview


Behavior at Edge

You may select one of two edge behaviors for any animation: Bounce Off Edge and Disappear Off Edge.

Bounce Off Edge

The animation will approach the edge at an arbitrary angle and will bounce off such that the angle of reflection is equal to the angle of incidence - i.e. just like a bouncing ball.

Disappear Off Edge

The animation will cross the edge and disappear from view, but will 'warp' to the other side of the applet bounding box and re-appear after a delay controlled by the Delay Before Restarting field.

  Overview


Horizontal Direction

This list controls the initial horizontal direction of any movement of the affected sprite inside the applet bounding box. Options are:

Don't Move Sideways

No horizontal movement at all.

Left to Right

Move from left boundary (or the position set by the Start Position Left field on the Properties tab) to the right, initially. If the Behavior At Edge property is set to Disappear At Edge, the animation's horizontal motion will always be left to right. For an animation whose Behavior At Edge is set to Bounce Off Edge, the concept of 'left to right' makes no difference after the first bounce has taken place.

Right to Left

Move from right boundary (or the position set by the Start Position Left field on the Properties tab) to the left, initially. If the Behavior At Edge property is set to Disappear At Edge, the animation will immediately disappear off the left edge, re-appear on the right, and subsequent horizontal motion will always be right to left. For an animation whose Behavior At Edge is set to Bounce Off Edge, the concept of 'right to left' makes no difference after the first bounce has taken place.

  Overview


Horizontal Speed

If horizontal motion is enabled (see the Horizontal Direction list), this field controls the speed at which the animation moves horizontally.

  Overview


Image Width and Height

If you leave these fields blank the image will be inserted as its actual size (say, as it would appear in photoshop). You can make the image any size you want by changing the values in these fields.

  Overview


Repeat Animation X Times

This field controls only the frame selected in the Animation Sequence list and allows you to control how many times an individual frame will run in the final Animator project independently of any other frames. Enter a number of repeats.

  Overview


Apply to Frame #
Apply to Frame

Each frame in the animation sequence can have its own properties (such as display time). To assign each frame its own properties, on the animation sequence click a frame and then enter its properties in the relevant boxes.

  Overview


Delay

  Overview


Disposal Method.
Disposal Method

  Overview